<template>
  <div class="orderRecord" v-loading="loading" :element-loading-text="$t('oralScan.oralScan_116')">
    <el-card class="version-log-management-page__header">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input v-model="query.userId" :placeholder="$t('oralScan.oralScan_46')" clearable />
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="query.softVersion"
            :placeholder="$t('oralScan.oralScan_47')"
            clearable
          />
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="query.serialNumber"
            :placeholder="$t('oralScan.oralScan_48')"
            clearable
          />
        </el-col>
        <el-col :span="6">
          <el-date-picker
            v-model="dates"
            :end-placeholder="$t('versionLogManagement.version02')"
            :start-placeholder="$t('versionLogManagement.version01')"
            format="yyyy-MM-dd"
            type="daterange"
            value-format="yyyy-MM-dd"
          />
        </el-col>
        <el-col :span="6" class="query_btn">
          <el-button type="primary" icon="el-icon-search" @click="toSearch">
            {{ $t('versionLogManagement.version00') }}
          </el-button>
          <el-button type="primary" @click="exportExcel()">
            {{ $t('orderManage.export') }}
          </el-button>
          <el-button @click="reset()">{{ $t('add.add124') }}</el-button>
        </el-col>
      </el-row>
    </el-card>
    <div class="table_box">
      <el-table
        @sort-change="handleSortChange"
        :data="tableData"
        style="width: 100%"
        height="570"
        border
        resizable
      >
        <el-table-column
          prop="serialNumber"
          :label="$t('oralScan.oralScan_10')"
          width="150"
          align="center"
          show-overflow-tooltip
          sortable="custom"
        />
        <el-table-column
          prop="userId"
          :label="$t('oralScan.oralScan_5')"
          width="180"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="softwareVersion"
          :label="$t('oralScan.oralScan_9')"
          width="150"
          align="center"
          sortable="custom"
          show-overflow-tooltip
        />
        <el-table-column
          prop="orderId"
          :label="$t('oralScan.oralScan_6')"
          width="150"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="orderType"
          :label="$t('oralScan.oralScan_7')"
          width="150"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="totalFrameRate"
          :label="$t('oralScan.oralScan_96')"
          width="150"
          align="center"
          show-overflow-tooltip
          sortable="custom"
        />
        <el-table-column
          prop="redBoxCount"
          :label="$t('oralScan.oralScan_12')"
          width="150"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="totalScanningTime"
          :label="$t('oralScan.oralScan_35')"
          width="150"
          align="center"
          sortable="custom"
          show-overflow-tooltip
        />

        <el-table-column
          prop="totalProcessingTime"
          :label="$t('oralScan.oralScan_95')"
          width="150"
          align="center"
          sortable="custom"
          show-overflow-tooltip
        />

        <el-table-column
          prop="newCaseCreationTime"
          :label="$t('oralScan.oralScan_97')"
          width="180"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="scanningInterfaceOpeningTime"
          :label="$t('oralScan.oralScan_98')"
          width="150"
          align="center"
          sortable="custom"
          show-overflow-tooltip
        />

        <el-table-column
          prop="startTime"
          :label="$t('oralScan.oralScan_15')"
          width="180"
          align="center"
          sortable="custom"
          show-overflow-tooltip
        />

        <el-table-column
          prop="endTime"
          :label="$t('oralScan.oralScan_16')"
          width="180"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="pauseCount"
          :label="$t('oralScan.oralScan_11')"
          width="150"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="pauseErasingDataTimes"
          :label="$t('oralScan.oralScan_13')"
          width="150"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="occlusionAdjustmentFrequency"
          :label="$t('oralScan.oralScan_8')"
          width="150"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="doesItCollapse"
          :label="$t('oralScan.oralScan_99')"
          width="150"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column :label="$t('oralScan.oralScan_26')" align="center">
          <el-table-column
            prop="maxillaryScanningTime"
            :label="$t('oralScan.oralScan_23')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="maxillaryFrameRate"
            :label="$t('oralScan.oralScan_24')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="maxillaryResetTimes"
            :label="$t('oralScan.oralScan_25')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="maxillarySupplementaryScanningTimes"
            :label="$t('oralScan.oralScan_21')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
        </el-table-column>

        <el-table-column :label="$t('oralScan.oralScan_30')" align="center">
          <el-table-column
            prop="mandibleScanningTime"
            :label="$t('oralScan.oralScan_23')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="mandibleFrameRate"
            :label="$t('oralScan.oralScan_24')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="mandibleResetTimes"
            :label="$t('oralScan.oralScan_25')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="mandibleSupplementaryScanningTimes"
            :label="$t('oralScan.oralScan_21')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
        </el-table-column>

        <el-table-column :label="$t('oralScan.oralScan_100')" align="center">
          <el-table-column
            prop="occlusionScanningTime"
            :label="$t('oralScan.oralScan_23')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="occlusionFrameRate"
            :label="$t('oralScan.oralScan_24')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="occlusionResetTimes"
            :label="$t('oralScan.oralScan_25')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="occlusionSupplementaryScanningTimes"
            :label="$t('oralScan.oralScan_21')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
        </el-table-column>

        <el-table-column :label="$t('oralScan.oralScan_17')" align="center">
          <el-table-column
            prop="maxillaryPreoperativeScanningTime"
            :label="$t('oralScan.oralScan_18')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="maxillaryPreoperativeFrameRate"
            :label="$t('oralScan.oralScan_19')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="maxillaryPreoperativeResetTimes"
            :label="$t('oralScan.oralScan_20')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="maxillaryPreoperativeSupplementaryScanningTimes"
            :label="$t('oralScan.oralScan_21')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
        </el-table-column>

        <el-table-column :label="$t('oralScan.oralScan_27')" align="center">
          <el-table-column
            prop="maxillaryImplantScanningTime"
            :label="$t('oralScan.oralScan_23')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="maxillaryImplantFrameRate"
            :label="$t('oralScan.oralScan_24')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="maxillaryImplantResetTimes"
            :label="$t('oralScan.oralScan_25')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="maxillaryImplantSupplementaryScanningTimes"
            :label="$t('oralScan.oralScan_21')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
        </el-table-column>

        <el-table-column :label="$t('oralScan.oralScan_22')" align="center">
          <el-table-column
            prop="maxillaScanningTime"
            :label="$t('oralScan.oralScan_23')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="maxillaFrameRate"
            :label="$t('oralScan.oralScan_24')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="maxillaResetTimes"
            :label="$t('oralScan.oralScan_25')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="maxillaryPreoperativeSupplementaryScanningTimes"
            :label="$t('oralScan.oralScan_21')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
        </el-table-column>

        <el-table-column :label="$t('oralScan.oralScan_28')" align="center">
          <el-table-column
            prop="mandiblePreoperativeScanningTime"
            :label="$t('oralScan.oralScan_23')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="mandiblePreoperativeFrameRate"
            :label="$t('oralScan.oralScan_24')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="mandiblePreoperativeResetTimes"
            :label="$t('oralScan.oralScan_25')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="mandiblePreoperativeSupplementaryScanningTimes"
            :label="$t('oralScan.oralScan_21')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
        </el-table-column>

        <el-table-column :label="$t('oralScan.oralScan_31')" align="center">
          <el-table-column
            prop="mandibleImplantScanningTime"
            :label="$t('oralScan.oralScan_23')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="mandibleImplantFrameRate"
            :label="$t('oralScan.oralScan_24')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="mandibleImplantResetTimes"
            :label="$t('oralScan.oralScan_25')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="mandibleImplantSupplementaryScanningTimes"
            :label="$t('oralScan.oralScan_21')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
        </el-table-column>

        <el-table-column :label="$t('oralScan.oralScan_29')" align="center">
          <el-table-column
            prop="mandibleBoneScanningTime"
            :label="$t('oralScan.oralScan_23')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="mandibleBoneFrameRate"
            :label="$t('oralScan.oralScan_24')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="mandibleBoneResetTimes"
            :label="$t('oralScan.oralScan_25')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="mandibleBoneSupplementaryScanningTimes"
            :label="$t('oralScan.oralScan_21')"
            width="150"
            align="center"
            show-overflow-tooltip
          />
        </el-table-column>

        <el-table-column
          prop="time"
          :label="$t('oralScan.oralScan_14')"
          width="180"
          align="center"
          sortable="custom"
          show-overflow-tooltip
        />
      </el-table>
    </div>

    <el-pagination
      background
      :current-page="query.page"
      :page-size="query.limit"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="onPageSizeChange"
      @current-change="onPageChange"
    />
  </div>
</template>

<script>
import { formatDate } from '@/utils/index';
import { exportExl } from '@/utils/xls';
export default {
  name: 'OralScan',

  data() {
    return {
      loading: false,
      dates: [],
      query: {
        page: 1,
        limit: 10,
        startTime: '',
        endTime: '',
        userId: '',
        softVersion: '',
        serialNumber: '',
        sortField: '',
        sortType: '',
        time: '',
      },
      total: 0,

      tableData: [],
    };
  },

  created() {
    this.toSearch();
  },
  mounted() {},
  methods: {
    toSearch() {
      this.query.page = 1;
      this.search();
    },
    handleSortChange({ prop, order }) {
      if (prop === 'serialNumber') {
        this.query.sortField = 'serial_number';
      } else if (prop === 'softwareVersion') {
        this.query.sortField = 'software_version';
      } else if (prop === 'totalFrameRate') {
        this.query.sortField = 'total_frame_rate';
      } else if (prop === 'totalScanningTime') {
        this.query.sortField = 'total_scanning_time';
      } else if (prop === 'totalProcessingTime') {
        this.query.sortField = 'total_processing_time';
      } else if (prop === 'scanningInterfaceOpeningTime') {
        this.query.sortField = 'scanning_interface_opening_time';
      } else if (prop === 'startTime') {
        this.query.sortField = 'start_time';
      } else if (prop === 'time') {
        this.query.sortField = 'time';
      }
      if (order === 'ascending') {
        this.query.sortType = 'asc';
      } else if (order === 'descending') {
        this.query.sortType = 'desc';
      }
      this.toSearch();
    },
    // 定义一个方法来赋值时间
    assignmentQuery() {
      if (this.dates && this.dates.length > 0) {
        this.query.startTime = this.dates[0];
        this.query.endTime = this.dates[1];
      } else {
        this.query.startTime = '';
        this.query.endTime = '';
      }
      this.query.page = String(this.query.page);
      this.query.limit = String(this.query.limit);
    },
    search() {
      this.assignmentQuery();
      this.$http
        .post('/orderdatarecord/scanDataRecordsData', this.query)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.tableData = res.data.records;
            this.total = Number(res.data.total);
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    onPageSizeChange(pageSize) {
      this.query.limit = pageSize;
      this.search();
    },
    onPageChange(page) {
      this.query.page = page;
      this.search();
    },
    reset() {
      this.dates = [];
      this.query = {
        page: 1,
        limit: 10,
        startTime: '',
        endTime: '',
        userId: '',
        softVersion: '',
        serialNumber: '',
      };
      this.toSearch();
    },
    exportExcel() {
      this.loading = true;
      this.assignmentQuery();
      this.$http({
        method: 'post',
        url: 'orderdatarecord/scanDataRecordsDataExportExcel', //后端接口
        responseType: 'blob',
        data: this.query,
      }).then(({ data: res }) => {
        let date = formatDate(new Date(), 'second');
        exportExl(res, `${this.$t('oralScan.oralScan_1')}_${date}.xls`);
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.orderRecord {
  width: 100%;
  height: 100%;

  .el-date-editor {
    width: 100%;
  }

  .table_box {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .query_btn {
    text-align: right;
  }
}
</style>
